<!--
 * @Description: 预览页面头部状态栏和导航栏
 * @Author: liyujie
 * @Date: 2021/7/21
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/7/21
-->
<template>
    <section class="wrapper">
        <!--状态栏-->
        <div
            class="status-bar"
            :style="{color: mode === 'dark' ? '#1D2023' : '#fff'}"
        >
            <div class="statusbar-left">
                <i class="iconfont el-icon-hand-left"/>
            </div>
            <div class="statusbar-center">
                <div class="center-text">9:41</div>
                <div class="center-eng">AM</div>
            </div>
            <div class="statusbar-right">
                <i class="iconfont el-icon-hand-bluetooth"/>
                <div class="right-number">100%</div>
                <i class="iconfont el-icon-hand-Battery"/>
            </div>
        </div>
        <!--导航栏-->
        <div
            class="nav-bar"
            :style="{color: mode === 'dark' ? '#1D2023' : '#fff'}"
        >
            <i
                class="iconfont"
                :class="leftIcon"
            />
            <div class="page-title">{{ title }}</div>
            <i
                class="iconfont"
                :class="rightIcon"
            />
        </div>
    </section>
</template>

<script>
export default {
    name: 'PageHeader',
    props: {
        mode: {
            type: String,
            default: 'dark'
        },
        leftIcon: {
            type: String,
            default: 'el-icon-hand-zuojiantou1'
        },
        rightIcon: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
    },
    data() {
        return {};
    },
    mounted() {
    },
    methods: {}
};
</script>

<style scoped lang="less">
.wrapper {
    height: 66px;
    background: #fff;
    .status-bar {
        width: 100%;
        height: 22px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;

        .statusbar-left, .statusbar-center, .statusbar-right {
            display: flex;
            height: 20px;
            align-items: center;
            font-size: 20px;
            font-weight: 500;

            .el-icon-hand-left, .el-icon-hand-bluetooth, .el-icon-hand-Battery {
                font-size: 20px;
            }

            .center-text {
                font-size: 12px;
                margin-right: 4px;
                font-weight: 500;
            }

            .center-eng {
                font-size: 12px;
                font-weight: 500;
            }

            .right-number {
                font-size: 12px;
            }

            .el-icon-hand-bluetooth {
                margin-right: -3px;
            }
        }

        .statusbar-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .nav-bar {
        height: 44px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 22px;
        left: 0;
        padding: 0 12px;
        z-index: 9;
        .page-title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1D2023;
        }
        .iconfont {
            width: 16px;
            height: 16px;
        }
    }
}
</style>
